<template>
  <div id="operation">
    <div class="orderBtn" v-if="form.orderStatus !='ddgb'">
      <a-button type="primary" @click="closeOrder">结束订单</a-button>
    </div>
    <div class="container common-detail">
      <div id="printJS-form">
        <a-form-model
          ref="form"
          :model="form"
          :label-col="{span: 8}"
          :wrapper-col="{span: 14}"
        >
          <div class="info-title">基础信息</div>
          <div class="form-row">
              <a-form-model-item label="订单流水号" class="form-col">
                <a-input
                  v-model="form.orderSn"
                  placeholder="请输入订单流水号"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="项目名称" class="form-col">
                <a-input
                  v-model="form.projectName"
                  placeholder="请输入项目名称"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="供应商联系人" class="form-col">
                <a-input
                  v-model="form.contactPhone"
                  placeholder="请输入供应商联系人"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="合同名称" class="form-col">
                <a-input
                  v-model="form.contract"
                  placeholder=""
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="采购部门" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.cdeptName"
                  placeholder="请输入采购部门"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="供应商名称" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.supplierName"
                  placeholder="请输入供应商名称"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="请购部门" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.vdef3Name"
                  placeholder="请输入请购部门"
                  :disabled="true"
                />
              </a-form-model-item>
          </div>
        </a-form-model>
        <div class="info-title">采购清单</div>
        <div style="max-height:300px;overflow: auto;">
          <DataTable
          style="margin-bottom: 20px;"
          rowKey="checkDetailId"
          :showConfig="false"
          :tableData="Data"
          :tableColumn="tableColumn"
        />
        </div>
      </div>
      <a-tabs default-active-key="1" >
        <a-tab-pane key="1" tab="验收记录">
          <a-input-search placeholder="输入验收编码" v-model="checkSn" style="width: 200px;margin:0 10px 20px 0;"/>
          <a-button type="primary" @click="getCheckAcceptList">搜索</a-button>
          <DataTable
            style="margin-bottom: 20px;"
            rowKey="checkDetailId"
            :showConfig="false"
            :expand = 'true'
            :tableData="tableListData"
            :tableColumn="tableList"
            :pageConfig="checkParams"
          >
          <template scope="scope" slot='expand'>
            <div class="dateTableTwo" >
              <div class="tableHeard">
                <div>材料编号</div>
                <div>材料名称</div>
                <div>单位</div>
                <div>验收数量</div>
                <div>存货备注</div>
              </div>
                <template v-for="(items,indexs) in scope.data.checkDetails" >
                  <div v-bind:key="indexs" class="tableContent">
                    <div>{{items.materialsNum}}</div>
                    <div>{{items.materialsName}}</div>
                    <div>{{items.unit}}</div>
                    <div>{{items.checkNum}}</div>
                    <div>{{items.vdef1?items.vdef1:'--'}}</div>
                  </div>
              </template>

            </div>
            </template>
          </DataTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="推送记录" force-render>
          <a-input-search placeholder="输入推送编号/验收编号" v-model="pushSn" style="width: 200px;margin:0 10px 20px 0;"/>
          <a-button type="primary" @click="getPushRecordList">搜索</a-button>
          <DataTable
            style="margin-bottom: 20px;"
            rowKey="checkDetailId"
            :showConfig="false"
            :tableData="checkPushes"
            :tableColumn="myTableList"
            :expand = 'true'
            :pageConfig="pushParams"
          >
          <template scope="scope" slot='expand'>
            <div class="dateTableTwo" >
              <div class="tableHeard">
                <div>材料编号</div>
                <div>材料名称</div>
                <div>单位</div>
                <div>推送入库数量</div>
                <div>存货备注</div>
              </div>
                <template v-for="(items,indexs) in scope.data.checkPushDetails" >
                  <div v-bind:key="indexs" class="tableContent">
                    <div>{{items.materialsNum}}</div>
                    <div>{{items.materialsName}}</div>
                    <div>{{items.unit}}</div>
                    <div>{{items.pushCount}}</div>
                    <div>{{items.vdef1?items.vdef1:'--'}}</div>
                  </div>
              </template>

            </div>
          </template>
          </DataTable>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script lang='ts'>
import { Confirm, Validate } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import print from 'print-js'

@Component
export default class purchaseDetails extends Vue {
  form: any = {};
  Data: any[] = [];
  tableListData:any[] = []
  myTableListData:any[] = []
  checkPushes:any[] = []
  ysKey:any = ''
  tsKey:any = ''
  checkParams:any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  pushParams:any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage2
  }
  checkSn:any = ''
  pushSn:any = ''
  get tableColumn () {
    return {
        number: {
            label: '序号',
            width: 50
        },
      materialsNum: {
        label: '材料编码'
      },
      vdef1: {
        label: '存货备注'
      },
      materialsName: {
        label: '材料名称'
      },
      spec: {
        label: '规格型号'
      },
      unit: {
        label: '单位'
      },
      orderNum: {
        label: '订单数量'
      },
      checkedNum: {
        label: '验收数量',
        type: this.isInput ? 'input' : 'null',
        width: 150
      },
      taxFreePrice: {
        label: '无税单价',
        type: this.isInput ? 'input' : 'null',
        width: 150
      },
      taxRate: {
        label: '税率',
        type: this.isInput ? 'input' : 'null',
        width: 150
      },
      taxInclusiveAmount: {
        label: '价税合计'
      },
      taxesPrice: {
        label: '税金'
      },
      propuction: {
        label: '生产厂家'
      },
      remark: {
        label: '备注'
      }
    }
  }
  get tableList () {
    return {
      checkSn: {
        label: '验收编号',
        width: 150
      },
      checkTime: {
        label: '验收时间',
        width: 150
      },
      status: {
        label: '状态',
        width: 150,
        map: this.$enums.acceptanceList.status
      }
    }
  }
  get myTableList () {
    return {
      checkPushCode: {
        label: '推送编号',
        width: 120
      },
      pushTime: {
        label: '推送时间',
        width: 120
      },
      refDeliverySn: {
        label: '验收编号',
        width: 150
      }
    }
  }

  expand (val:any) {

  }
  init () {
    const {_alias: alias, orderId: id} = this.$route.query
    this.id = id as string
    this.getDetail()
    this.getCheckAcceptList()
    this.getPushRecordList()
  }
  changePage (val: number) {
    this.checkParams.current = val;
    this.getCheckAcceptList();
  }
  changePage2 (val: number) {
    this.pushParams.current = val;
    this.getPushRecordList();
  }
  // 关闭订单
  closeOrder () {
    this.$api.checkOrderCloseOrderFetch({orderId: this.id}).then((res:any) => {
      if (res.code === 0) {
        this.getDetail()
      }
      this.$message.success(res.mag)
    }).catch()
  }
  getDetail () {
    this.$api.checkOrderCheckOrderDetailFetch({orderId: this.id}).then(({ data }: any) => {
      console.log(data, '==')
      this.form = data.orderList // 获取到订单信息
      data.detailList.map((item:any, index:any) => {
        item.number = index + 1
      })
      this.Data = data.detailList // 采购清单
    })
  }
  // 获取验收记录
  getCheckAcceptList () {
    let data = {
      page: this.checkParams.current,
      size: this.checkParams.pageSize,
      orderId: this.id,
      checkSn: this.checkSn
    }
    this.$api.checkOrderCheckAcceptListFetch(data).then(res => {
      if (res.code == 0) {
        this.tableListData = res.data.records
        this.checkParams.total = res.data.total
      }
    }).catch()
  }
  // 获取推送记录
  getPushRecordList () {
    let data = {
      page: this.pushParams.current,
      size: this.pushParams.pageSize,
      orderId: this.id,
      pushSn: this.pushSn
    }
    this.$api.checkOrderPushRecordListFetch(data).then(res => {
      if (res.code == 0) {
        this.checkPushes = res.data.records
        this.pushParams.total = res.data.total
      }
    }).catch()
  }
}
</script>
<style lang='scss' scoped>
#operation{
  position: relative;
}
.orderBtn{
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 99999;
}
.info-title{
  padding-top: 20px;
}
.pic-wrap{
  display: flex;
  flex-wrap: wrap;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  .form-col {
    width: 50%;
    flex-shrink: 0;
  }
}
.form-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.img-item {
  width: 100px;
  height: 100px;
  margin: 0px 10px 10px 0;
}

.tableHeard,.tableContent{
  display: flex;
  div{
    width: 25%;
    text-align: center;
  }
}

</style>
